<template>
<!--  投入成本-->
<div class="investedCost">
  <el-select v-model="selectProject" placeholder="请选择">
    <el-option v-for="item in projectList" :key="item.value" :label="item.name" :value="item.value"></el-option>
  </el-select>
  <div id="aaa" style="width:100%;height:100px;"></div>
</div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "investedCost",
  data(){
    return{
      projectList:[
        {name:'风光一体化防沙治沙',value:'1'},
        {name:'三北六期',value:'2'},
        {name:'蚂蚁森林',value:'3'},
        {name:'蓝旗机器人造林',value:'4'},
      ],
      selectProject:'1',
      data1:{
        ydata: ['苗木费'],
        legend: ['使用金额', '剩余金额'],
        barData: [
          {
            name: '使用金额',
            data: [13],
          },
          {
            name: '剩余金额',
            data: [10],
          },
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart1()
    })
  },
  methods:{
    initChart1(){
      const ctx = document.getElementById('aaa')
      const aaa = echarts.init(ctx)
      let serData = [];
      this.data.barData.forEach((item) => {
        serData.push({
          name: item.name,
          type: 'bar',
          stack: 'all',
          barWidth: 12,
          data: item.data,
          showBackground: true,
          backgroundStyle: {
            color: '#f5f5f5'
          },
        })
      })
      let option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let arr = [...params];
            let str = '';
            arr.forEach((item) => {
              str += item.marker + item.seriesName + '  ' + item.data + '<br />';
            });
            str = arr[0].name + '<br />' + str;
            return str;
          },
        },
        color: [
          '#159AFF',
          '#66E1DF',
          '#66E193',
          '#E3F170',
          '#FFAD6A',
          '#9A70FD',
          '#ffe0ab',
          '#6bc5f4',
          '#c08ef2',
          '#ffda49'
        ],
        //图表选择栏
        legend: {
          icon: 'circle',
          top: '5%',
          left: 'center',
          orient: 'horizontal', //图例方向【horizontal/vertical】
          itemHeight: 18, //修改icon图形大小
          itemWidth: 18, //修改icon图形大小
          selectedMode: false, //不允许点击图例
          itemGap: 30,
          textStyle: {
            fontSize: 14,
            color: 'black',
          },
          data: this.data.legend,
        },
        //图标离容器的距离
        grid: {
          left: '5%',
          right: '3%',
          bottom: '10%',
          top: '20%',
          //是否包含坐标轴
          containLabel: true,
        },
        //x坐标轴
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'black'
              }
            },
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              color: 'black',
              fontSize: 12,
            },
          },
        ],
        //y坐标轴
        yAxis: [
          {
            type: 'category',
            name: '',
            data: this.data.ydata,
            splitLine: {
              show: false,
            },
            // inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              textStyle: {
                color: 'black',
                fontSize: 12,
              },
            },
          },
        ],
        // 数据展示区域
        series: serData
      };
      aaa.setOption(option)
    }
  }
}
</script>

<style scoped>
.investedCost{
  margin: 20px;
}
</style>
